<template>
  <div class="faq-container">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item>FAQ</el-breadcrumb-item>
        <el-breadcrumb-item>{{ question }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <div class="left">
        <div class="title">How to Find {{ route.query.appName }} Alternatives?</div>
        
        <div class="section">
          <h2>Step 1: Visit the App Details Page</h2>
          <p>1. Open your browser and go to our website</p>
          <p>2. In the search bar, enter the name of the app for which you want to find alternatives</p>
        </div>
  
        <div class="section">
          <h2>Step 2: Locate the "Related Apps" Section</h2>
          <p>1. Scroll down the details page until you find the section labeled "Related Apps"</p>
          <p>2. Click on this section to expand and view the recommended alternative apps</p>
        </div>
  
        <div class="section">
          <h2>Step 3: Browse and Download Alternative Apps</h2>
          <p>1. In the "Related Apps" section, you'll see multiple recommended alternative apps</p>
          <p>2. Click on the alternative app that interests you to open its details page</p>
          <p>3. Review the app's description, ratings, and user comments to confirm if it meets your needs</p>
          <p>4. If satisfied, click the Download APK button to save the file to your device</p>
        </div>
  
        <div class="section">
          <h2>Why Use Our Platform to Find Related Apps?</h2>
          <ul>
            <li><strong>Diverse Options:</strong> We offer a wide range of alternative app recommendations to help you find the best fit</li>
            <li><strong>User Reviews:</strong> Check ratings and comments from other users to better understand the app's quality and performance</li>
            <li><strong>Convenient Downloads:</strong> All recommended apps can be downloaded directly through our platform</li>
          </ul>
        </div>
  
        <div class="section">
          <h2>Important Notes</h2>
          <ul>
            <li><strong>Security:</strong> Ensure that the APK files downloaded are from trusted sources to avoid malware or viruses</li>
            <li><strong>Compatibility:</strong> Check the app's system requirements before downloading to ensure your device is compatible</li>
            <li><strong>Backup Data:</strong> Before installing a new app, it's recommended to back up important data to prevent any unexpected issues</li>
          </ul>
        </div>
      </div>
      <TopDownloads />
    </div>
  </div>
</template>

<script setup>
import TopDownloads from '@/components/TopDownloads.vue'
const route = useRoute()
const question = route.query.question

definePageMeta({
  title: 'Alternative FAQ',
  layout: 'default'
})
</script>

<style scoped lang="scss">
.faq-container {
  /* max-width: 1200px;
  margin: 0 auto;
  padding: 2rem; */

  .breadcrumb {
    margin-bottom: 2rem;
  }

  .content {
    display: flex;
    gap: 5rem;
    margin-top: 2rem;
    .title {
      @include title;
    }
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }

    .section {
      margin-bottom: 2rem;

      h2 {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: #444;
      }

      p {
        font-size: 1rem;
        line-height: 1.6;
        color: #666;
        margin-bottom: 0.5rem;
      }

      ul {
        list-style-type: disc;
        margin-left: 1.5rem;
        margin-bottom: 1rem;

        li {
          font-size: 1rem;
          line-height: 1.6;
          color: #666;
          margin-bottom: 0.5rem;

          strong {
            color: #333;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .faq-container {
    padding: 1rem;

    .content {
      h1 {
        font-size: 1.5rem;
      }

      .section {
        h2 {
          font-size: 1.2rem;
        }
      }
    }
  }
}
</style>